<template>
  <div class="tools">
    <div class="item" v-for="item in tools" :key="item.key" @click="handlerClick(item)">
      <n-dropdown trigger="hover" :options="item.children" @select="handleSelect">
        <div>
          <n-icon size="20" color="#fff">
            <i :class="`iconfont center ${item.icon}`"></i>
          </n-icon>
          <div class="text">
            {{ item.label }}
          </div>
        </div>
      </n-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, unref, defineProps, computed } from "vue";
import { DropdownOption, createDiscreteApi } from "naive-ui";
import { useMapStore } from "@/store/modules/map";
import { useMap } from "@/hooks/map/useMap";
import { unByKey } from "ol/Observable";
import { tools } from "./config/data.config";
import Geolocation from "ol/Geolocation.js";
import BaseLayer from "ol/layer/Base.js";

const props = defineProps({
  map: {
    type: Object,
    default: () => {},
  },
});
const { message } = createDiscreteApi(["message"]);
const useStore = useMapStore();

const { drawType, showTip, drawMap } = useMap();

const draw: any = ref(null);
const tipList = ref<any[]>([]);

const baseMap: any = computed(() => {
  return props.map;
});
//下拉工具栏选中事件
const handleSelect = (key: string, option: DropdownOption) => {
  if (["LineString", "Polygon", "Rectangle", "Circle"].includes(key)) {
    startDraw(key);
    endDraw(key);
  } else if (["tiandituVecLayer", "tiandituImgLayer"].includes(key)) {
    changeBaseMap(key);
  }
};
//工具栏点击事件
const handlerClick = (item: any) => {
  if (item.children) {
    return;
  }
  switch (item.key) {
    case "clear":
      delDraw();
      break;
    case "screenShot":
      screenshot();
      break;
    case "location":
      getLocation();
      break;
    default:
      break;
  }
};

const getVectorSource = () => {
  let layersGroup = unref(baseMap).getAllLayers();
  let vector = layersGroup[4];
  return vector.getSource();
};

const startDraw = (type: string) => {
  let source = getVectorSource();
  draw.value = drawType(source, type);
  unref(baseMap).addInteraction(unref(draw));
  useStore.updateDraw(true);
};

const endDraw = (type: string) => {
  unref(draw).on("drawend", (evt: any) => {
    let tip = showTip(evt, type, unref(baseMap));
    unref(baseMap).addOverlay(tip);
    tipList.value.push(tip);
    unref(baseMap).removeInteraction(unref(draw));
    useStore.updateDraw(false);
  });
};
// 底图切换
const changeBaseMap = (key: string) => {
  let layersGroup = unref(baseMap).getAllLayers();
  layersGroup.forEach((v: any, i: number) => {
    v.setVisible(v.get("pId") === key);
  });
};
// 删除图层
const delDraw = () => {
  let source = getVectorSource();
  source.clear();
  unref(tipList).forEach((v) => {
    unref(baseMap).removeOverlay(v);
  });
};
//截图
const screenshot = () => {
  drawMap(unref(baseMap), "截图");
};
//获取定位
const getLocation = () => {
  unref(baseMap).getTargetElement().style.cursor = "crosshair";
  let location: any = null;
  location = unref(baseMap).on("singleclick", function (e: any) {
    message.success(`经度：${e.coordinate[0]}纬度：${e.coordinate[1]}`);
    unByKey(location); //清除鼠标点击事件
    unref(baseMap).getTargetElement().style.cursor = "default";
  });
};
</script>

<style lang="scss" scoped>
.tools {
  position: absolute;
  right: 20px;
  top: 74px;
  background: rgba(5, 17, 41, 0.8) !important;
  width: auto;
  height: 50px;
  display: flex;
  flex-direction: row;
  .item {
    width: 60px;
    text-align: center;
    padding: 4px 0;
    position: relative;

    &:hover {
      background: #1e80ff;
    }

    .icon {
      font-size: 23px;
      color: white;
    }

    .text {
      font-size: 12px;
      color: white;
    }

    .iconfont {
      line-height: 21.5px;
    }
  }
}
</style>
